<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <div class="btns">
                <el-button type="primary" size="small" @click="collectFee"
                    >代收费用</el-button
                >
                <el-button type="primary" size="small" @click="powerFee"
                    >水电抄表</el-button
                >
                <el-button type="primary" size="small" @click="createFee"
                    >创建费用</el-button
                >
                <el-button type="primary" size="small" @click="arrearsFee"
                    >欠费缴费</el-button
                >
                <el-button type="primary" size="small" @click="goBack"
                    >返回</el-button
                >
            </div>

            <el-table :data="tableList" border stripe>
                <el-table-column prop="a" label="项目费用"></el-table-column>
                <el-table-column prop="a" label="费用标识"></el-table-column>
                <el-table-column prop="a" label="费用类型"></el-table-column>
                <el-table-column prop="a" label="应收金额"></el-table-column>
                <el-table-column prop="a" label="建账时间"></el-table-column>
                <el-table-column
                    prop="a"
                    label="计费起始时间"
                ></el-table-column>
                <el-table-column
                    prop="a"
                    label="计费结束时间"
                ></el-table-column>
                <el-table-column prop="a" label="说明"></el-table-column>
                <el-table-column prop="a" label="状态"></el-table-column>
                <el-table-column prop="a" label="操作" width="250">
                    <template>
                        <el-button type="text" size="small" @click="payFee"
                            >缴费</el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click="payFeeHistory"
                            >缴费历史</el-button
                        >
                        <el-button type="text" size="small" @click="changFee"
                            >费用变更</el-button
                        >
                        <el-button type="text" size="small" @click="cancelFee"
                            >取消费用</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </basic-container>
        <el-dialog
            title="代收费用"
            :visible.sync="collectFeeDialogVisible"
            width="40%"
        >
            <collect-fee  @closeCollectFee="closeCollectFee" />
        </el-dialog>

        <el-dialog
            title="代收费用"
            :visible.sync="powerFeeDialogVisible"
            width="40%"
        >
            <power-fee  @closePowerFee="closePowerFee" />
        </el-dialog>
        <el-dialog
            title="创建费用"
            :visible.sync="createFeeDialogVisible"
            width="40%"
        >
            <create-fee  @closeCreateFee="closeCreateFee" />
        </el-dialog>
        <el-dialog
            title="欠费缴费"
            :visible.sync="arrearsFeeDialogVisible"
            width="40%"
        >
            <arrears-fee  @closeArrearsFee="closeArrearsFee" />
        </el-dialog>

        <el-dialog
            title="缴费"
            :visible.sync="payFeeDialogVisible"
            width="40%"
        >
            <pay-fee  @closePayFee="closePayFee" />
        </el-dialog>
        <el-dialog
            title="缴费历史"
            :visible.sync="payFeeHistoryDialogVisible"
            width="40%"
        >
            <pay-fee-history  @closePayFeeHistory="closePayFeeHistory" />
        </el-dialog>
        <el-dialog
            title="费用变更"
            :visible.sync="changeFeeDialogVisible"
            width="40%"
        >
            <change-fee  @closeChangeFee="closeChangeFee" />
        </el-dialog>
    </div>
</template>

<script>
import CollectFee from './collectFee/index'
import PowerFee from './powerFee/index'
import CreateFee from './createFee/index'
import ArrearsFee from './arrearsFee/index'
import ChangeFee from './changeFee/index'
import PayFee from './payFee/index'
import PayFeeHistory from './payFeeHistory'
export default {
    name: "propertyFee",
    components: {
        CollectFee,
        PowerFee,
        CreateFee,
        ArrearsFee,
        ChangeFee,
        PayFee,
        PayFeeHistory
    },
    data() {
        return {
            tableList: [{ id: 1, a: "aaa" }],
            collectFeeDialogVisible: false,
            powerFeeDialogVisible: false,
            createFeeDialogVisible: false,
            arrearsFeeDialogVisible: false,

            payFeeDialogVisible: false,
            payFeeHistoryDialogVisible: false,
            changeFeeDialogVisible: false,
        };
    },
    created() {},
    methods: {
        // 关闭代收费用
        closeCollectFee() {
            this.collectFeeDialogVisible = false
        },

        // 代收费用
        collectFee() {
            this.collectFeeDialogVisible = true
        },
        // 关闭水电抄表
        closePowerFee() {
             this.powerFeeDialogVisible = false
        },
        // 水电抄表
        powerFee() {
            this.powerFeeDialogVisible = true
        },
        // 关闭创建费用
        closeCreateFee() {
            this.createFeeDialogVisible = false
        },
        // 创建费用
        createFee() {
            this.createFeeDialogVisible = true
        },
        // 关闭欠费缴费
        closeArrearsFee() {
            this.arrearsFeeDialogVisible = false;
        },
        // 欠费缴费
        arrearsFee() {
            this.arrearsFeeDialogVisible = true;
        },
        // 返回
        goBack() {
            this.$router.go("-1");
        },
        // 关闭缴费
        closePayFee() {
            this.payFeeDialogVisible = false;
        },
        // 缴费
        payFee() {
            this.payFeeDialogVisible = true;
        },
        // 关闭缴费历史
        closePayFeeHistory() {
            this.payFeeHistoryDialogVisible = false;
        },
        // 缴费历史
        payFeeHistory() {
            this.payFeeHistoryDialogVisible = true;
        },
        // 关闭费用变更
        closeChangeFee() {
            this.changeFeeDialogVisible = false;
        },
        // 费用变更
        changFee() {
            this.changeFeeDialogVisible = true;
        },
        // 取消费用
        cancelFee() {
            this.$confirm("确认删除费用?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message.succcess("删除成功");
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.btns {
    text-align: right;
    margin: 20px 0;
}
</style>